<template>
<el-card>
    <div slot="header" class="header">
      订单管理
    </div>
    <!-- 查询表单 -->
    <el-form inline size="mini" :model="formData">
      <!-- 订单号 -->
      <el-form-item label="订单号">
        <el-input v-model="formData.orderNo"></el-input>
      </el-form-item>
      <!-- 收货人 -->
      <el-form-item label="收货人">
        <el-input v-model="formData.consignee"></el-input>
      </el-form-item>
      <!-- 手机号 -->
      <el-form-item label="手机号">
        <el-input v-model="formData.phone"></el-input>
      </el-form-item>
      <!-- 订单状态 -->
      <el-form-item label="订单状态">
        <el-select v-model="formData.orderState">
          <el-option value="已受理">已受理</el-option>
          <el-option value="派送中">派送中</el-option>
          <el-option value="已完成">已完成</el-option>
        </el-select>
      </el-form-item>
      <!-- 选择时间 -->
      <el-form-item label="选择时间">
        <!-- format	显示在输入框中的格式 	yyyy-MM-dd HH:mm:ss -->
        <!-- value-format	可选，绑定值的格式。不指定则绑定值为 Date 对象  string	见日期格式-->
        <el-date-picker value-format='yyyy-MM-dd HH:mm:ss'
          format='yyyy-MM-dd HH:mm:ss' v-model="formData.date"
          type="datetimerange" range-separator="至" start-placeholder="开始日期"
          end-placeholder="结束日期">
        </el-date-picker>
      </el-form-item>
      <!-- 操作 -->
      <el-form-item>
        <el-button @click="search" type="primary">查询</el-button>
      </el-form-item>
    </el-form>
    <!-- 表格 -->
    <el-table :data='tableData'>
      <!-- 订单号 -->
      <el-table-column fixed prop="orderNo" label="订单号"></el-table-column>
      <!-- 下单时间 -->
      <el-table-column label="下单时间">
        <template slot-scope="scope">
          {{scope.row.orderTime |formatDateHms}}
        </template>
      </el-table-column>
      <!-- 手机号 -->
      <el-table-column width="120px" prop="phone" label="手机号"></el-table-column>
      <!-- 收货人 -->
      <el-table-column prop="consignee" label="收货人"></el-table-column>
      <!-- 配速地址 -->
      <el-table-column width="120px" prop="deliverAddress" label="配速地址">
      </el-table-column>
      <!-- 送达时间 -->
      <el-table-column label="送达时间">
        <template slot-scope="scope">
          {{scope.row.deliveryTime |formatDateHms}}
        </template>
      </el-table-column>
      <!-- 用户备注 -->
      <el-table-column prop="remarks" label="用户备注"></el-table-column>
      <!-- 订单金额 -->
      <el-table-column prop="orderAmount" label="订单金额"></el-table-column>
      <!-- 订单状态 -->
      <el-table-column prop="orderState" label="订单状态"></el-table-column>
      <!-- 操作 -->
      <el-table-column width="90px" fixed="right" label="操作">
        <template slot-scope="scope">
          <el-button @click="handleClick(scope.row)" type="text" size="small">查看
          </el-button>
          <el-button type="text" size="small"
            @click="$router.push({path:'/order/order-detail',query:{id:scope.row.id}})">
            编辑</el-button>
        </template>
      </el-table-column>
    </el-table>

    <!-- 分页 -->
    <!-- size-change 改变每页条数 -->
    <!-- current-change 改变当前页 -->
    <!-- current-page 当前页 -->
    <!-- page-sizes 每页条数选项 -->
    <!-- page-size 每页多少条 -->
    <!-- layout 布局组件 组件用逗号隔开 -->
    <el-pagination background class="mt20" @current-change="handleCurrentChange"
      :current-page="currentPage" :page-size="pageSize"
      layout="total, prev, pager, next, jumper" :total="total">
    </el-pagination>
  </el-card>
</template>

<script>
//解构ajax
export default {
  data() {
    return {
      //表单数据
      formData: {
        orderNo: '',//订单号
        consignee: "",//收货人
        phone: "",//电话
        orderState: "",//订单状态
        date: "",//日期范围
      },
      currentPage: 1,//当前页
      pageSize: 3,//每页条数
      total: 0,//总条数
      tableData: [],//表格数据
      searchForm: {},//查询表单数据
    }
  },
  methods: {
    //查询数据
    search() {
      //把当前页 改为1
      this.currentPage = 1

      //修改数据
      let date = JSON.stringify(this.formData.date)
      //点击查询按钮 把当前表单数据赋值给查询表单
      this.searchForm = { ...this.formData, date }

      //传入表单数据查询
      this.getData(this.searchForm)
    },
    //获取数据
    async getData(searchForm = {}) {
      //获取参数
      let currentPage = this.currentPage
      let pageSize = this.pageSize
      //发送请求
      let res = await getOrderListReq({ currentPage, pageSize, ...searchForm })
      //解构数据
      let { data, total } = res.data
      //数据赋值
      this.tableData = data
      this.total = total
    },
    //分页
    handleCurrentChange(val) {
      //当前页赋值给 currentPage
      this.currentPage = val
      //拉取数据 拉取查询表单的数据
      this.getData(this.searchForm)
    }
  },
}
</script>

<style lang="scss" scoped>

</style>